<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#75AACF">
    <title data-l10n-id="webthings-gateway">WebThings Gateway</title>
    <link rel="manifest" href="/app.webmanifest">
    <link rel="icon" href="/optimized-images/icon.png" type="image/png" />
    <link rel="apple-touch-icon-precomposed" href="/optimized-images/icon.png" type="image/png">
  </head>
  <body class="hidden">
    <!-- Assistant View -->
    <section data-view="assistant" id="assistant-view">
      <div id="assistant-content">
        <div id="assistant-messages"></div>
        <div id="assistant-hint"></div>
        <div id="assistant-avatar">
          <img data-l10n-id="assistant-avatar-image"
               id="assistant-avatar-image" src="/optimized-images/fox.svg" />
        </div>
      </div>
      <div id="assistant-controls">
        <button id="assistant-speech-button" class="icon-button" data-l10n-id="speech-button"></button>
        <canvas id="assistant-stm-levels" class="hidden"></canvas>
        <input id="assistant-text-input" type="text"
               data-l10n-id="assistant-controls-text-input" />
        <button id="assistant-text-submit" data-l10n-id="submit-button"></button>
      </div>
    </section>

    <!-- Things View -->
    <section data-view="things" class="selected" id="things-view">
      <div id="thing-title" class="hidden">
        <div id="thing-title-back-flex"></div>
        <div id="thing-title-container">
          <div id="thing-title-icon">
          </div>
          <span id="thing-title-title"></span>
        </div>
        <div id="thing-title-speech-flex"></div>
      </div>
      <div id="things"></div>
      <button id="add-button" class="icon-button" data-l10n-id="add-things"></button>
    </section>

    <!-- Floorplan View -->
    <section data-view="floorplan" id="floorplan-view" class="hidden">
      <div id="floorplan">
      </div>
      <form id="floorplan-upload-form" class="hidden">
        <button id="floorplan-upload-button" class="text-button" data-l10n-id="upload-floorplan"></button>
        <div class="hint" data-l10n-id="upload-floorplan-hint"></div>
      </form>
      <button id="floorplan-back-button" class="icon-button" data-l10n-id="back-button"></button>
      <button id="floorplan-edit-button" class="icon-button" data-l10n-id="edit-button"></button>
      <button id="floorplan-done-button" class="hidden icon-button" data-l10n-id="save-button"></button>
      <input id="floorplan-file-input" type="file" name="upload"
        accept="image/jpeg,image/png,image/svg+xml">
    </section>

    <!-- Settings View -->
    <section data-view="settings" id="settings-view" class="hidden">
      <nav id="settings-menu" class="hidden settings-section">
        <ul>
          <li class="settings-item"><a id="domain-settings-link" href="/settings/domain" data-l10n-id="settings-domain"></a></li>
          <li class="settings-item"><a id="network-settings-link" href="/settings/network" data-l10n-id="settings-network"></a></li>
          <li class="settings-item"><a id="user-settings-link" href="/settings/users" data-l10n-id="settings-users"></a></li>
          <li class="settings-item"><a id="addon-settings-link" href="/settings/addons" data-l10n-id="settings-add-ons"></a></li>
          <!-- <li class="settings-item"><a id="adapter-settings-link" href="/settings/adapters" data-l10n-id="settings-adapters"></a></li> -->
          <li class="settings-item"><a id="localization-settings-link" href="/settings/localization" data-l10n-id="settings-localization"></a></li>
          <li class="settings-item"><a id="update-settings-link" href="/settings/updates" data-l10n-id="settings-updates"></a></li>
          <li class="settings-item"><a id="authorization-settings-link" href="/settings/authorizations" data-l10n-id="settings-authorizations"></a></li>
          <li class="settings-item"><a id="experiment-settings-link" href="/settings/experiments" data-l10n-id="settings-experiments"></a></li>
          <li class="settings-item"><a id="developer-settings-link" href="/settings/developer" data-l10n-id="settings-developer"></a></li>
        </ul>
      </nav>

      <section id="domain-settings" class="hidden settings-section">
        <ul>
          <li class="domain-item">
            <input id="domain-settings-local-checkbox" name="domain-settings"
              class="experiment-checkbox" type="checkbox">
            <label id="domain-settings-local-label"
              data-l10n-id="domain-settings-local-label"
              for="domain-settings-local-checkbox">
            </label>
            <input type="text" id="domain-settings-local-name" name="gateway"
                   data-l10n-id="domain-settings-local-name" />
            <span id="domain-settings-local-suffix">.local</span>
            <div id="domain-settings-error" class="domain-settings-error hidden"></div>
            <button id="domain-settings-local-update" class="domain-settings-update text-button"
                    data-l10n-id="domain-settings-local-update"
                    type="submit">
            </button>
          </li>
          <li class="domain-item">
            <p class="domain-settings-container" data-l10n-id="domain-settings-remote-access">
            </p>
            <p id="domain-settings-tunnel-name" class="domain-settings-container">
              &nbsp;. mozilla-iot.org
            </p>
          </li>

          <!-- Removed until full integration of service discovery and tunnel endpoints
          <li class="domain-item">
            <input id="domain-settings-tunnel-checkbox" name="domain-settings" class="experiment-checkbox" type="checkbox">
            <label for="domain-settings-tunnel-checkbox">Use Mozilla IoT Tunnel Service (mozilla-iot.org) </label>
            <p class="domain-settings-description-small">Choose a web address for your gateway e.g. "johns-house"</p>
            <p><input type="text" id="domain-settings-tunnel-name" name="domain" placeholder="example">.mozilla-iot.org</p>
            <p class="domain-settings-description-small">Input your email address to get your secure keys emailed to you.</p>
            <input type="text" id="domain-settings-tunnel-email" name="email" placeholder="email address">
            <br/>
            <button id="domain-settings-moz-tunnel-change" class="text-button" type="submit">Request Change</button>
          </li>
          -->

        </ul>
      </section>

      <section id="network-settings" class="hidden settings-section">
        <section id="network-settings-unsupported" class="hidden settings-subsection">
          <div id="network-settings-unsupported-text" data-l10n-id="network-settings-unsupported">
          </div>
        </section>
        <section id="network-settings-client" class="hidden settings-subsection">
          <ul class="network-settings-list">
            <li class="network-item">
              <img src="/optimized-images/ethernet.svg"
                data-l10n-id="network-settings-ethernet-image"
                class="network-settings-list-item-icon" />
              <div class="network-settings-list-item-container-2">
                <div class="network-settings-list-item-header" data-l10n-id="network-settings-ethernet"></div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-ethernet-ip">
                </div>
              </div>
              <button class="network-settings-list-item-button text-button"
                id="network-settings-list-item-ethernet-configure"
                data-l10n-id="network-settings-configure">
              </button>
            </li>
            <li class="network-item">
              <img src="/optimized-images/wifi.svg"
                data-l10n-id="network-settings-wifi-image"
                class="network-settings-list-item-icon" />
              <div class="network-settings-list-item-container-3">
                <div class="network-settings-list-item-header" data-l10n-id="network-settings-wifi"></div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-wifi-ssid">
                </div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-wifi-ip">
                </div>
              </div>
              <button class="network-settings-list-item-button text-button"
                id="network-settings-list-item-wifi-configure"
                data-l10n-id="network-settings-configure">
              </button>
            </li>
          </ul>
        </section>
        <section id="network-settings-router" class="hidden settings-subsection">
          <ul class="network-settings-list">
            <li class="network-item">
              <img src="/optimized-images/internet.svg"
                data-l10n-id="network-settings-internet-image"
                class="network-settings-list-item-icon" />
              <div class="network-settings-list-item-container-2">
                <div class="network-settings-list-item-header"
                     data-l10n-id="network-settings-internet-wan">
                </div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-wan-ip">
                </div>
              </div>
              <button class="network-settings-list-item-button text-button"
                id="network-settings-list-item-wan-configure"
                data-l10n-id="network-settings-configure">
              </button>
            </li>
            <li class="network-item">
              <img src="/optimized-images/network.svg"
                data-l10n-id="network-settings-home-network-image"
                class="network-settings-list-item-icon" />
              <div class="network-settings-list-item-container-2">
                <div class="network-settings-list-item-header"
                     data-l10n-id="network-settings-home-network-lan">
                </div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-lan-ip">
                </div>
              </div>
              <button class="network-settings-list-item-button text-button"
                id="network-settings-list-item-lan-configure"
                data-l10n-id="network-settings-configure">
              </button>
            </li>
            <li class="network-item">
              <img src="/optimized-images/wifi.svg"
                data-l10n-id="network-settings-wifi-image"
                class="network-settings-list-item-icon" />
              <div class="network-settings-list-item-container-2">
                <div class="network-settings-list-item-header"
                     data-l10n-id="network-settings-wifi-wlan">
                </div>
                <div class="network-settings-list-item-detail"
                  id="network-settings-list-item-wlan-ssid">
                </div>
              </div>
              <button class="network-settings-list-item-button text-button"
                id="network-settings-list-item-wlan-configure"
                data-l10n-id="network-settings-configure">
              </button>
            </li>
          </ul>
        </section>
        <section id="network-settings-ethernet" class="hidden settings-subsection">
          <div class="network-settings-wrap">
            <label for="network-settings-ethernet-mode" data-l10n-id="network-settings-ip-address"></label>
            <select id="network-settings-ethernet-mode" class="network-select">
              <option value="dhcp" data-l10n-id="network-settings-dhcp"></option>
              <option value="static" data-l10n-id="network-settings-static"></option>
            </select>
            <label for="network-settings-ethernet-ip" id="network-settings-ethernet-ip-label" data-l10n-id="network-settings-static-ip-address"></label>
            <input id="network-settings-ethernet-ip" class="network-text"
                   type="text">
            <label for="network-settings-ethernet-netmask" id="network-settings-ethernet-netmask-label" data-l10n-id="network-settings-network-mask"></label>
            <input id="network-settings-ethernet-netmask" class="network-text"
                   type="text">
            <label for="network-settings-ethernet-gateway" id="network-settings-ethernet-gateway-label" data-l10n-id="network-settings-gateway"></label>
            <input id="network-settings-ethernet-gateway" class="network-text"
                   type="text">
            <button id="network-settings-ethernet-done" class="network-button text-button" data-l10n-id="network-settings-done">
            </button>
          </div>
        </section>
        <section id="network-settings-wifi" class="hidden settings-subsection">
          <div class="network-settings-wrap">
            <ul id="network-settings-wifi-network-list">
            </ul>
            <div id="network-settings-wifi-wrap">
              <input id="network-settings-wifi-ssid" type="hidden">
              <input id="network-settings-wifi-password" class="network-password"
                     type="password" data-l10n-id="network-settings-wifi-password">
              <input id="network-settings-wifi-show-password" class="network-checkbox"
                     type="checkbox">
              <label for="network-settings-wifi-show-password" class="checkbox"></label>
              <span data-l10n-id="network-settings-show-password"></span>
              <button id="network-settings-wifi-connect" class="network-button text-button"
                      data-l10n-id="network-settings-connect">
              </button>
            </div>
          </div>
        </section>
        <section id="network-settings-wan" class="hidden settings-subsection">
          <div class="network-settings-wrap">
            <label for="network-settings-wan-mode" data-l10n-id="network-settings-wan-mode"></label>
            <select id="network-settings-wan-mode" class="network-select">
              <option value="dhcp" data-l10n-id="network-settings-dhcp"></option>
              <option value="static" data-l10n-id="network-settings-static"></option>
              <option value="pppoe" data-l10n-id="network-settings-pppoe"></option>
            </select>
            <label for="network-settings-wan-ip" id="network-settings-wan-ip-label" data-l10n-id="network-settings-ip-address"></label>
            <input id="network-settings-wan-ip" class="network-text"
                   type="text">
            <label for="network-settings-wan-netmask" id="network-settings-wan-netmask-label" data-l10n-id="network-settings-network-mask"></label>
            <input id="network-settings-wan-netmask" class="network-text"
                   type="text">
            <label for="network-settings-wan-gateway" id="network-settings-wan-gateway-label" data-l10n-id="network-settings-gateway"></label>
            <input id="network-settings-wan-gateway" class="network-text"
                   type="text">
            <label for="network-settings-wan-username" id="network-settings-wan-username-label" data-l10n-id="network-settings-username"></label>
            <input id="network-settings-wan-username" class="network-text"
                   type="text">
            <label for="network-settings-wan-password" id="network-settings-wan-password-label" data-l10n-id="network-settings-password"></label>
            <input id="network-settings-wan-password" class="network-password"
                   type="password">
            <button id="network-settings-wan-done" class="network-button text-button" data-l10n-id="network-settings-done">
            </button>
          </div>
        </section>
        <section id="network-settings-lan" class="hidden settings-subsection">
          <div class="network-settings-wrap">
            <label for="network-settings-lan-ip" data-l10n-id="network-settings-router-ip"></label>
            <input id="network-settings-lan-ip" class="network-text"
                   type="text">
            <label for="network-settings-lan-netmask" data-l10n-id="network-settings-network-mask"></label>
            <input id="network-settings-lan-netmask" class="network-text"
                   type="text">
            <span data-l10n-id="network-settings-dhcp-server"></span>
            <input id="network-settings-lan-dhcp" class="network-checkbox"
                   type="checkbox">
            <label for="network-settings-lan-dhcp" class="checkbox"></label>
            <button id="network-settings-lan-done" class="network-button text-button" data-l10n-id="network-settings-done">
            </button>
          </div>
        </section>
        <section id="network-settings-wlan" class="hidden settings-subsection">
          <div class="network-settings-wrap">
            <span data-l10n-id="network-settings-enable-wifi"></span>
            <input id="network-settings-wlan-enable" class="network-checkbox"
                   type="checkbox">
            <label for="network-settings-wlan-enable" class="checkbox"></label>
            <label for="network-settings-wlan-ssid" data-l10n-id="network-settings-network-name"></label>
            <input id="network-settings-wlan-ssid" class="network-text"
                   type="text">
            <label for="network-settings-wlan-password" data-l10n-id="network-settings-password"></label>
            <input id="network-settings-wlan-password" class="network-password"
                   type="password">
            <div id="network-settings-wlan-show-password-wrap">
              <input id="network-settings-wlan-show-password" class="network-checkbox"
                     type="checkbox">
              <label for="network-settings-wlan-show-password" class="checkbox"></label>
              <span data-l10n-id="network-settings-show-password"></span>
            </div>
            <button id="network-settings-wlan-done" class="network-button text-button"
                    data-l10n-id="network-settings-done">
            </button>
          </div>
        </section>
      </section>

      <section id="user-settings" class="hidden settings-section">
        <section id="user-settings-main" class="hidden settings-subsection">
          <ul id="users-list">
          </ul>
        </section>
        <section id="user-settings-edit" class="hidden settings-subsection">
          <form id="edit-user-form" class="user-form">
            <input type="hidden" id="user-settings-edit-id">
            <input type="text" id="user-settings-edit-name" name="name"
              required data-l10n-id="user-settings-input-name">
            <input type="email" id="user-settings-edit-email" name="email"
              required data-l10n-id="user-settings-input-email">
            <input type="password" id="user-settings-edit-password"
              required data-l10n-id="user-settings-input-password">
            <input type="password" id="user-settings-edit-new-password"
              name="confirm-password" data-l10n-id="user-settings-input-new-password">
            <input type="password" id="user-settings-edit-confirm-password"
              name="confirm-password" data-l10n-id="user-settings-input-confirm-new-password">
            <div id="user-settings-edit-password-mismatch" class="error hidden"
              data-l10n-id="user-settings-password-mismatch">
            </div>
            <div id="user-settings-edit-error" class="error hidden"></div>
            <button id="user-settings-edit-save" class="user-settings-save"
              data-l10n-id="user-settings-save" type="submit"></button>
          </form>
        </section>
        <section id="user-settings-add" class="hidden settings-subsection">
          <form id="add-user-form" class="user-form">
            <input type="text" id="user-settings-add-name" name="name"
              data-l10n-id="user-settings-input-name" required>
            <input type="email" id="user-settings-add-email" name="email"
              data-l10n-id="user-settings-input-email" required>
            <input type="password" id="user-settings-add-password"
              name="password" data-l10n-id="user-settings-input-password" required>
            <input type="password" id="user-settings-add-confirm-password"
              name="confirm-password" data-l10n-id="user-settings-input-confirm-password" required>
            <div id="user-settings-add-password-mismatch" class="error hidden"
              data-l10n-id="user-settings-password-mismatch">
            </div>
            <div id="user-settings-add-error" class="error hidden"></div>
            <button id="user-settings-add-save" class="user-settings-save"
              type="submit" data-l10n-id="user-settings-save">Save</button>
          </form>
        </section>
      </section>
      <section id="addon-settings" class="hidden settings-section">
        <section id="addon-main-settings" class="hidden settings-subsection">
          <ul id="installed-addons-list">
          </ul>
        </section>
        <section id="addon-config-settings" class="hidden settings-subsection">
        </section>
        <section id="addon-discovery-settings" class="hidden settings-subsection">
          <ul id="discovered-addons-list">
          </ul>
        </section>
      </section>
      <section id="adapter-settings" class="hidden settings-section">
        <div id="no-adapters" data-l10n-id="adapter-settings-no-adapters"></div>
        <ul id="adapters-list" class="hidden">
        </ul>
      </section>
      <section id="authorization-settings" class="hidden settings-section">
        <ul id="authorizations">
          <li id="no-authorizations" class="hidden authorization-item"
              data-l10n-id="authorization-settings-no-authorizations"></li>
        </ul>
      </section>
      <section id="experiment-settings" class="hidden settings-section">
        <ul>
          <li id="assistant-experiment-item" class="experiment-item">
            <input id="assistant-experiment-checkbox" class="experiment-checkbox"
                   type="checkbox">
            <label for="assistant-experiment-checkbox" data-l10n-id="experiment-settings-smart-assistant"></label>
          </li>
          <li id="logs-experiment-item" class="experiment-item">
            <input id="logs-experiment-checkbox" class="experiment-checkbox"
                   type="checkbox">
            <label for="logs-experiment-checkbox" data-l10n-id="experiment-settings-logs"></label>
          </li>

        </ul>
      </section>
      <section id="localization-settings" class="hidden settings-section">
        <ul>
          <li class="localization-item" id="language-region-container">
            <div class="localization-item-header" data-l10n-id="localization-settings-language-region"></div>
            <div class="localization-item-content">
              <label for="localization-settings-country" data-l10n-id="localization-settings-country"></label>
              <select id="localization-settings-country" class="localization-select"></select>
              <label for="localization-settings-timezone" data-l10n-id="localization-settings-timezone" name="localization-settings-timezone"></label>
              <select id="localization-settings-timezone" class="localization-select"></select>
              <label for="localization-settings-language" data-l10n-id="localization-settings-language" name="localization-settings-language"></label>
              <select id="localization-settings-language" class="localization-select"></select>
            </div>
          </li>
          <li class="localization-item" id="units-container">
            <div class="localization-item-header" data-l10n-id="localization-settings-units"></div>
            <div class="localization-item-content">
              <label for="localization-settings-units-temperature" data-l10n-id="localization-settings-units-temperature"></label>
              <select id="localization-settings-units-temperature" class="localization-select">
                <option value="degree celsius" data-l10n-id="localization-settings-units-temperature-celsius"></option>
                <option value="degree fahrenheit" data-l10n-id="localization-settings-units-temperature-fahrenheit"></option>
              </select>
            </div>
          </li>
        </ul>
      </section>
      <section id="update-settings" class="hidden settings-section">
        <ul>
          <!-- TODO(hobinjk): allow disabling automatic updates -->
          <li class="update-item" id="up-to-date-container">
            <p id="update-settings-up-to-date"></p>
            <button id="update-now" class="text-button hidden" data-l10n-id="update-settings-update-now"></button>
          </li>
          <li class="update-item">
            <p id="update-settings-version"></p>
            <p id="update-settings-status"></p>
          </li>
        </ul>
      </section>
      <section id="developer-settings" class="hidden settings-section">
        <ul>
          <li id="enable-ssh-item" class="developer-checkbox-item">
            <input id="enable-ssh-checkbox" class="developer-checkbox" type="checkbox">
            <label for="enable-ssh-checkbox" data-l10n-id="developer-settings-enable-ssh"></label>
          </li>
          <li class="developer-link-item">
            <a id="view-internal-logs" href="#" target="_blank" rel="noopener"
               data-l10n-id="developer-settings-view-internal-logs"></a>
          </li>
          <li class="developer-link-item">
            <a id="new-local-authorization"
               href="/oauth/authorize?response_type=code&client_id=local-token&scope=/things:readwrite&state=asdf"
               data-l10n-id="developer-settings-create-local-authorization">
            </a>
          </li>
        </ul>
      </section>
      <a href="/settings" id="settings-back-button" class="hidden back-button icon-button" data-l10n-id="back-button"></a>
      <button id="discover-addons-button" class="icon-button hidden" data-l10n-id="add-addons"></button>
      <button id="add-user-button" class="icon-button hidden" data-l10n-id="create-user"></button>
    </section>

    <!-- Rules View -->
    <section data-view="rules" id="rules-view" class="hidden">
      <div class="title-bar">
        <h3 class="rules-header" data-l10n-id="rules"></h3>
      </div>
      <div id="rules">
        <div id="create-rule-hint" class="hidden" data-l10n-id="rules-create-rule-hint">
        </div>
      </div>
      <button id="create-rule-button" class="icon-button" data-l10n-id="add-rule"></button>
    </section>

    <section data-view="rule" id="rule-view" class="hidden">
      <div class="title-bar">
        <a href="/rules" class="back-button icon-button" data-l10n-id="back-button"></a>
        <div class="rule-info">
          <h1>
            <span class="rule-name" data-l10n-id="rules-rule-name"></span>
            <img src="/optimized-images/customize-16.svg"
                 data-l10n-id="rules-customize-rule-name-icon"
                 class="rule-name-customize"/>
          </h1>
          <p data-l10n-id="rules-rule-description"></p>
        </div>
        <button class="rule-preview-button icon-button" data-l10n-id="rules-preview-button"></button>
        <button id="delete-button">
          <img src="/optimized-images/delete-16.svg" data-l10n-id="rules-delete-icon" width="40" height="40"/>
        </button>
      </div>
      <div id="rule-area">
        <div id="onboarding-hint">
         <div class="drag-hint">
            <div class="drag-hint-container">
              <h2 data-l10n-id="rules-drag-hint"></h2>
            </div>
          </div>
        </div>
        <div id="drag-hint">
          <div class="drag-hint-trigger drag-hint">
            <div class="drag-hint-container">
              <p data-l10n-id="rules-drag-input-hint"></p>
              <div class="drag-hint-block">+</div>
            </div>
          </div>
          <div class="drag-hint-effect drag-hint">
            <div class="drag-hint-container">
              <p data-l10n-id="rules-drag-output-hint"></p>
              <div class="drag-hint-block">+</div>
            </div>
          </div>
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" id="connection">
        </svg>
      </div>
      <div id="rule-parts-list-container">
        <button id="rule-parts-list-scroll-left">
          <img class="scroll-icon" data-l10n-id="rules-scroll-left" src="/optimized-images/arrowhead-left-16.svg"/>
        </button>
        <button id="rule-parts-list-scroll-right">
          <img class="scroll-icon" data-l10n-id="rules-scroll-right" src="/optimized-images/arrowhead-right-16.svg"/>
        </button>
        <div id="delete-area">
          <div class="delete-container">
            <h2 class="delete-prompt" data-l10n-id="rules-delete-prompt"></h2>
          </div>
        </div>
        <div id="rule-parts-list"></div>
      </div>
      <div id="rule-delete-overlay">
        <div class="rule-delete-dialog">
          <p data-l10n-id="rules-delete-dialog"></p>
          <input class="rule-delete-cancel-button" type="button"
                 value="Cancel" data-l10n-id="rules-delete-cancel"/>
          <input class="rule-delete-confirm-button" type="button"
                 value="Remove Rule" data-l10n-id="rules-delete-confirm"/>
        </div>
      </div>
    </section>

    <!-- Logs View -->
    <section data-view="logs" id="logs-view" class="hidden">
      <div class="title-bar">
        <h3 class="logs-header" data-l10n-id="logs"></h3>
      </div>
      <div class="logs">
        <div class="create-log-hint hidden" data-l10n-id="logs-create-log-hint">
        </div>
      </div>
      <button class="create-log-button icon-button" data-l10n-id="add-log"></button>
    </section>

    <!-- Speech button -->
    <div id="speech-wrapper" class="hidden">
      <button id="speech-button" class="icon-button" data-l10n-id="speech-button"></button>
      <canvas id="stm-levels" class="hidden"></canvas>
    </div>

    <!-- Menu -->
    <div id="menu-scrim" class="hidden"></div>
    <nav id="main-menu" class="hidden">
      <img id="menu-wordmark" data-l10n-id="wordmark" src="/optimized-images/wordmark.svg" />
      <ul>
        <li><a id="assistant-menu-item" data-l10n-id="assistant-menu-item" href="/assistant" class="hidden" ></a></li>
        <li><a id="things-menu-item" data-l10n-id="things-menu-item" href="/things" class="selected"></a></li>
        <li><a id="rules-menu-item" data-l10n-id="rules-menu-item" href="/rules"></a></li>
        <li><a id="logs-menu-item" data-l10n-id="logs-menu-item" href="/logs"></a></li>
        <li><a id="floorplan-menu-item" data-l10n-id="floorplan-menu-item" href="/floorplan"></a></li>
        <li><a id="settings-menu-item" data-l10n-id="settings-menu-item" href="/settings"></a></li>
        <li>
          <form id="logout" class="log-out-form">
            <button type="submit" class="log-out-button text-button" data-l10n-id="log-out-button"></button>
          </form>
        </li>
      </ul>
    </nav>

    <!-- Floating buttons -->
    <button id="menu-button" class="icon-button" data-l10n-id="menu-button"></button>
    <button id="back-button" class="icon-button hidden" data-l10n-id="back-button"></button>
    <button id="logs-back-button" class="back-button icon-button hidden" data-l10n-id="back-button"></button>
    <button id="overflow-button" class="icon-button hidden" data-l10n-id="overflow-button"></button>
    <a href="/things" id="extension-back-button" class="hidden back-button icon-button" data-l10n-id="back-button"></a>
    <div id="overflow-menu" class="hidden"></div>

    <!-- Message area -->
    <div id="message-area" class="hidden"></div>

    <!-- Add Thing Screen -->
    <div id="add-thing-screen" class="hidden dialog">
      <button id="add-thing-back-button" class="back-button icon-button" data-l10n-id="back-button"></button>
      <div id="add-thing-content">
        <p id="add-thing-status">
        <img class="spinner" data-l10n-id="add-thing-scanning-icon" src="/optimized-images/loading.gif" /><span data-l10n-id="add-thing-scanning"></span>
        </p>
        <p id="add-adapters-hint" class="hidden">
          <span data-l10n-id="add-thing-add-adapters-hint"></span>
          <a id="add-adapters-hint-anchor" href="/settings/addons"
             data-l10n-id="add-thing-add-adapters-hint-anchor"></a>
        </p>
        <div id="new-things"></div>
        <p id="add-by-url">
          <a id="add-by-url-anchor" href="#" class="hidden" data-l10n-id="add-thing-add-by-url"></a>
        </p>
        <button id="add-thing-cancel-button" class="text-button" data-l10n-id="add-thing-done"></button>
      </div>
    </div>

    <!-- Create Log Screen -->
    <div id="create-log-screen" class="hidden dialog">
      <button id="create-log-back-button" class="back-button icon-button" data-l10n-id="back-button"></button>
      <div id="create-log-content">
        <div class="create-log-label" data-l10n-id="logs-device">
        </div>
        <div class="create-log-input">
          <select class="create-log-device arrow-select"  data-l10n-id="logs-device-select"></select>
        </div>
        <div class="create-log-label" data-l10n-id="logs-property">
        </div>
        <div class="create-log-input">
           <select class="create-log-property arrow-select" data-l10n-id="logs-property-select"></select>
        </div>
        <div class="create-log-label" data-l10n-id="logs-retention">
        </div>
        <div class="create-log-input">
          <input type="number" class="create-log-retention-duration-number" data-l10n-id="logs-retention-length" min="1" value="7"/>
          <select class="create-log-retention-duration-unit arrow-select" data-l10n-id="logs-retention-unit">
            <option value="hours" data-l10n-id="logs-hours"></option>
            <option value="days" data-l10n-id="logs-days" selected></option>
            <option value="weeks" data-l10n-id="logs-weeks"></option>
        </div>
        <div class="create-log-spacer"></div>
        <button id="create-log-save-button" class="text-button" data-l10n-id="logs-save"></button>
      </div>
    </div>

    <!-- Context Menu -->
    <div id="context-menu" class="hidden dialog">
      <button id="context-menu-back-button" class="back-button icon-button" data-l10n-id="back-button"></button>
      <div id="context-menu-heading">
        <div id="context-menu-heading-icon">
        </div>
        <span id="context-menu-heading-text"></span>
      </div>
      <div id="context-menu-content">
        <div id="context-menu-content-edit" class="hidden">
          <div id="edit-thing-icon">
          </div>
          <div id="edit-thing-metadata">
            <input type="text" id="edit-thing-title">
            <select id="edit-thing-type" class="arrow-select"></select>
            <span id="edit-thing-spacer"></span>
            <input type="file" class="edit-thing-custom-icon-input hidden"
              id="edit-thing-custom-icon-input"
              accept="image/jpeg,image/png,image/svg+xml">
            <label for="edit-thing-custom-icon-input"
              id="edit-thing-custom-icon-label" class="edit-thing-button text-button hidden"
              data-l10n-id="context-menu-choose-icon">
            </label>
            <span id="edit-thing-label" class="hidden"></span>
          </div>
          <button id="edit-thing-save-button" class="edit-thing-button text-button"
            data-l10n-id="context-menu-save">
          </button>
        </div>
        <div id="context-menu-content-remove" class="hidden">
          <button id="remove-thing-button" class="context-menu-button danger"
            data-l10n-id="context-menu-remove">
          </button>
        </div>
      </div>
    </div>

    <div id="log-remove-dialog" class="hidden dialog">
      <div class="log-remove-container">
        <h2>
          <span data-l10n-id="logs-remove-dialog-title"></span>
          <span id="log-remove-name"></span>
        </h2>
        <p data-l10n-id="logs-remove-dialog-warning"></p>
        <button id="log-remove-button" class="context-menu-button danger" data-l10n-id="logs-remove">
        </button>
      </div>
      <button id="log-remove-back-button" class="back-button icon-button" data-l10n-id="back-button"></button>
    </div>
    <div id="connectivity-scrim" class="hidden"></div>
  </body>
</html>
